<template>
  <div style="text-align: left; background-color: white;">
    <!--账号信息，绑定银行卡等-->
    <div style="margin-left: 10px">
      <!--<div>-->
      <!--<div style="margin-bottom: 5px;">-->
      <!--<span style="font-weight: bold;">账号信息</span><span style="color: #999999;margin-left: 160px"-->
      <!--@click="nameInfo()">修改</span>-->
      <!--</div>-->
      <!--<div style="margin-bottom: 5px">-->
      <!--<span>银行卡号:</span>-->
      <!--<span v-show="teacherinfo.bankCard==''" class="weibangding">未绑定，请点击</span>-->
      <!--<a v-show="teacherinfo.bankCard==''" @click="nameInfo()">进入绑定</a>-->
      <!--<span v-show="teacherinfo.bankCard!=''">{{ teacherinfo.bankCard }}</span>-->
      <!--</div>-->

      <!--<div style="margin-bottom: 5px">-->
      <!--<span>开户行:</span>-->
      <!--<span v-show="teacherinfo.bankName==''" class="weibangding">未绑定，请点击</span>-->
      <!--<a v-show="teacherinfo.bankName==''" @click="nameInfo()">进入绑定</a>-->
      <!--<span v-show="teacherinfo.bankName!=''">{{ teacherinfo.bankName }}</span>-->
      <!--</div>-->

      <!--<div style="margin-bottom: 5px">-->
      <!--<span>开户名:</span>-->
      <!--<span class="weibangding" v-show="teacherinfo.bankTeacherName==''">未绑定，请点击</span>-->
      <!--<a v-show="teacherinfo.bankTeacherName==''" @click="nameInfo()">进入绑定</a>-->
      <!--<span v-show="teacherinfo.bankTeacherName!=''">{{ teacherinfo.bankTeacherName }}</span>-->
      <!--</div>-->
      <!--</div>-->
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!--订单收益-->
          <el-tab-pane label="订单收益" name="first">

            <el-form :inline="true" :model="money" class="demo-form-inline" style="margin-top: 20px">
              <el-form-item label="共收益">
                <el-input v-model="money.AllMoney" readonly="true"></el-input>
              </el-form-item>
              <el-form-item label="未提现">
                <el-input v-model="money.TiMoney" readonly="true"></el-input>
              </el-form-item>
              <el-form-item label="提现">
                <!--<el-input type="number" :min="0" v-model="money.addMoney" placeholder="请输入金额"></el-input>-->
                <el-input  onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" v-model="money.addMoney" placeholder="请输入金额"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="addMoney">提现</el-button>
              </el-form-item>
            </el-form>

            <!--订单收益表-->
            <div style="margin-top: 20px;">
              <el-table
                :data="formInline"
                border>
                <el-table-column
                  prop="order_no"
                  label="订单号"
                >
                </el-table-column>
                <el-table-column
                  prop="course_name"
                  label="课程信息">
                </el-table-column>
                <el-table-column
                  prop="pay_time"
                  label="购买时间">

                </el-table-column>
                <el-table-column
                  prop="uname"
                  label="购买人">
                </el-table-column>
                <el-table-column
                  prop="price_payable"
                  label="价格">
                </el-table-column>
                <el-table-column
                  prop="lecturer_profit"
                  label="收入">
                </el-table-column>
              </el-table>

            </div>
          </el-tab-pane>

          <!--提现记录选项卡内容-->
          <el-tab-pane label="提现记录" name="second">
            <div>
              <el-table
                :data="tableInfo"
                border>
                <el-table-column
                  prop="gmt_create"
                  label="申请时间">
                </el-table-column>
                <el-table-column
                  prop="money"
                  label="金额">
                </el-table-column>
                <!--<el-table-column-->
                <!--prop="bank_num"-->
                <!--label="银行卡账号">-->
                <!--</el-table-column>-->
                <el-table-column
                  prop="lecturer_user_name"
                  label="开户人">
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <!--借款信息选项卡-->
          <!--<el-tab-pane label="结款信息" name="third">-->
          <!--<div style="margin-left: 50px;">-->
          <!--<el-form ref="form" :model="form" label-width="80px" :rules="rule">-->

          <!--<el-form-item label="银行卡号" prop="bankCardinfo">-->
          <!--<el-input v-model="form.bankCardinfo" style="width: 300px;"></el-input>-->
          <!--</el-form-item>-->

          <!--<el-form-item label="开户人" prop="bankPerson">-->
          <!--<el-input v-model="form.bankPerson" style="width: 300px;"></el-input>-->
          <!--</el-form-item>-->

          <!--<el-form-item label="开户行" prop="bankName">-->
          <!--<el-input v-model="form.bankName" style="width: 300px;"></el-input>-->
          <!--</el-form-item>-->

          <!--<el-form-item label="开户支行" prop="bankBranch">-->
          <!--<el-input v-model="form.bankBranch" style="width: 300px;"></el-input>-->
          <!--</el-form-item>-->

          <!--<el-form-item label="身份证号" prop="idCard">-->
          <!--<el-input v-model="form.idCard" style="width: 300px;"></el-input>-->
          <!--</el-form-item>-->

          <!--<el-form-item label="关联手机" prop="banktel">-->
          <!--<el-input v-model="form.banktel" style="width: 300px;"></el-input>-->
          <!--</el-form-item>-->

          <!--<el-form-item>-->
          <!--<el-button type="primary" @click="onSubmit">立即创建</el-button>-->
          <!--<el-button>取消</el-button>-->
          <!--</el-form-item>-->
          <!--</el-form>-->
          <!--</div>-->

          <!--</el-tab-pane>-->

        </el-tabs>
        <div class="block" style="margin:auto;text-align: center;" v-show="this.tan">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4.current"
            :page-sizes="[2, 4, 20, 50, 100, 200, 500]"
            :page-size="currentPage4.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import qs from 'qs';
  import moment from 'moment' // 导入
  export default {
    name: "InCome",
    data() {
      return {
        //分页弹出
        tan: true,
        tabid: '',
        // 讲师的信息
        teacherinfo: {
          bankCard: '',
          bankName: '',
          bankTeacherName: '',
        },
        //订单收益表
        total: 0,
        lecturer: [],
        formInline: [],
        tableInfo: [],
        money: {
          AllMoeny: '',
          TiMoney: '0'
        },
        //form表单信息
        form: {
          bankCardinfo: '',
          bankPerson: '',
          bankName: '',
          bankBranch: '',
          idCard: '',
          banktel: ''
        }
        ,
        activeName: 'first',
        //分页
        currentPage4: {
          lecturerId: '',
          current: 1,
          size: 2,
        },

        //form表单校验
        rule: {
          //银行卡号校验
          bankCardinfo: [
            {required: true, message: '请输入银行卡号', trigger: 'blur'},
            {min: 19, max: 19, message: '请输入19位银行卡号', trigger: 'blur'},
          ],
          //开户人校验
          bankPerson: [
            {required: true, message: '请输入姓名', trigger: 'blur'},
            {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'},
            {
              required: true,
              pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
              message: '姓名不支持特殊字符',
              trigger: 'blur'
            }
          ],
          //开户行校验
          bankName: [
            {required: true, message: '请输入开户行', trigger: 'blur'},
            {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'},
            {
              required: true,
              pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
              message: '开户行不支持特殊字符',
              trigger: 'blur'
            }
          ],
          //开户支行校验
          bankBranch: [
            {required: true, message: '请输入开户支行', trigger: 'blur'},
            {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'},
            {
              required: true,
              pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
              message: '开户支行不支持特殊字符',
              trigger: 'blur'
            }
          ],
          idCard: [
            {required: true, message: '请输入身份证号', trigger: 'blur'},
            {min: 15, max: 18, message: '请如实填写18位号码，以供我们核对', trigger: 'blur'},
            {
              required: true,
              pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
              message: '请输入正确的身份证号码',
              trigger: 'blur'
            }
          ],
          banktel: [
            {required: true, message: '请输入电话号码', trigger: 'blur'},
            {
              required: true,
              pattern: /^((13|14|15|16|17|18)[0-9]{1}\d{8})|((166|199|198)[0-9]{1}\d{7})$/,
              message: '请输入正确的电话号码',
              trigger: 'blur'
            }
          ]


        }
      }
    }, created() {
      this.currentPage4.lecturerId = sessionStorage.getItem("uid");
      this.getHang();
      this.getdata();
      this.allMoeny();
    },
    methods: {

      handleClick(tab, event) {
        this.total = 0;
        this.currentPage4.size = 2;
        this.currentPage4.current = 1;
        if (tab.name == 'first') {
          this.tabid = 1;
          this.allMoeny();
          this.getdata()
        }
        if (tab.name == 'second') {
          this.tan = true;
          this.tabid = 2;
          this.second();
        }
        if (tab.name == 'third') {
          this.tan = false;
          this.third();
        }

      },

      getHang() {
        this.$axios2.get("order/lecturer/selectById?id=" + this.currentPage4.lecturerId).then(r => {
          this.lecturer = r.data.records;
        });
      },

      //分页
      getdata() {
        //获取老师ID
        this.currentPage4.lecturerId = sessionStorage.getItem("uid");
        //拿取订单
        this.$axios2.post("order/orderInfo/findAllBylecturer_id", qs.stringify(this.currentPage4)).then(r => {
          this.total = r.data.total;
          this.formInline = r.data.records;
          this.current = 1;
        });
      },
      handleSizeChange(val) {
        this.currentPage4.size = val;
        if (this.tabid === 1) {
          this.getdata();
        } else {
          this.second();
        }
      },
      handleCurrentChange(val) {
        this.currentPage4.current = val;
        if (this.tabid === 1) {
          this.getdata();
        } else {
          this.second();
        }
      },

      //收入 AllMoney 还剩多少没提现 TiMoney
      allMoeny() {
        this.$axios2.get("order/edu-withdrawals/money?id=" + this.currentPage4.lecturerId).then(r => {
          this.money = r.data;
        });
      },

      //提现
      addMoney() {
        // alert(this.money.addMoney);
        let obj = {
          lecturerId: '',
          money: '',
          gmtCreate: '',
        };
        obj.lecturerId = this.currentPage4.lecturerId;
        obj.money = this.money.addMoney;
        obj.gmtCreate = moment().format('YYYY-MM-DD HH:MM:SS');
        if (this.money.TiMoney >= this.money.addMoney && this.money.addMoney >= 0) {
          this.$axios2.post("order/edu-withdrawals/AddById", qs.stringify(obj)).then(r => {
            if (r.data) {
              this.allMoeny();
              this.$message({
                type: 'success',
                message: '提现成功!',
              })

            } else {
              this.$message({
                type: 'error',
                message: '提现失败!',
              });
            }
          });
        } else {
          this.$message({
            type: 'error',
            message: '请重新输入提现金额！',
          });
          this.money.addMoney = 0;
        }


      },

      //提现记录
      second() {
        this.$axios2.post("order/edu-withdrawals/findAllById", qs.stringify(this.currentPage4)).then(r => {
          this.total = r.data.total;
          this.tableInfo = r.data.records;
          this.current = 1;
        });
      },

      //结款信息
      third() {

      },


      nameInfo() {
        this.activeName = 'third';
      },
      onSubmit() {
        if (!/^((1[3,5,8,7,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(this.zhuceform.phone)) {
          this.$alert('请输入正确手机号', '提示', {
            confirmButtonText: '确定',
          });
        }
      },
      //编写日期格式化方法
      dateFormat: function (row, column) {
        console.log(row, column);
        const date = row[column.property];
        if (date === undefined) {
          return ''
        }
        // 这里的格式根据需求修改
        return moment(date).format('YYYY-MM-DD HH:mm:ss')
      }
    }
  }
</script>

<style scoped>
  a {
    color: #0099FF;
  }

  .weibangding {
    color: #999999;
  }
</style>
